<template>
	<view class="header">
		<view class="header-decoration">
			<view class="line"></view>
			<view class="dot"></view>
		</view>
		<text class="title">{{ title }}</text>
		<text class="subtitle">{{ subtitle }}</text>
		<view class="header-decoration right">
			<view class="line"></view>
			<view class="dot"></view>
		</view>
	</view>
</template>
<script setup>
	const props = defineProps({
		title: {
			type: String,
			default: '永恒纪念园',
		},
		subtitle: {
			type: String,
			default: '致敬逝者 慰藉生者',
		},
	});
</script>

<style lang="scss" scoped>
	.header {
		text-align: center;
		padding: 40px 0;
		position: relative;
		z-index: 2;

		.header-decoration {
			position: absolute;
			top: 50%;
			left: 20px;
			transform: translateY(-50%);
			display: flex;
			align-items: center;

			&.right {
				left: auto;
				right: 20px;
				transform: translateY(-50%) rotate(180deg);
			}

			.line {
				width: 60px;
				height: 1px;
				background: linear-gradient(to right, transparent, #6c8eaf, transparent);
				opacity: 0.4;
			}

			.dot {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: #6c8eaf;
				box-shadow: 0 0 10px rgba(108, 142, 175, 0.3);
			}
		}

		.title {
			font-size: 32px;
			color: #495057;
			font-weight: bold;
			display: block;
			margin-bottom: 15px;
			letter-spacing: 2px;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
		}

		.subtitle {
			font-size: 16px;
			color: #868e96;
			letter-spacing: 1px;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: -8px;
				left: 50%;
				transform: translateX(-50%);
				width: 40px;
				height: 2px;
				background: linear-gradient(to right, transparent, #6c8eaf, transparent);
				opacity: 0.3;
			}
		}
	}
</style>
